<template>
	<view class="container">
		<view class="signInBox">
			<view class="backIcon pt-40 plr-30 flex">
				<u-icon name="arrow-left" @click="backHome" size="40" color="#fff"></u-icon>
				<view class="" style="color:#fff" @click="toSignLog">签到记录</view>
			</view>
			<view class="signTit">
				<image src="../../static/home/signTit.png" mode="widthFix"></image>
			</view>
			<view class="signSubTit">
				<image src="../../static/home/signSubTit.png" mode="widthFix"></image>
				<view class="signtext">已连续签到 {{signDays}} 天</view>
			</view>
			<view class="signCont">
				<view class="signContImg">
					<view class="contImg" v-for="item in 2"></view>
				</view>
				<view class="signTips">连续签到七日可获得双倍积分</view>
				<view class="signInfo">
					<view :class="num>item.index?'signItem1':'signItem'"  v-for="item in signList" :style="item.index == 6?'width:48%':'width: 22%'">
						<view class="">{{item.val}}</view>
						<view class="">
							<image v-if="item.index<6" :src="num>item.index?'../../static/home/goldCoin1.png':'../../static/home/goldCoin.png'" mode="widthFix" ></image>
							<image style="width: 80rpx;" v-else :src="num>item.index?'../../static/home/twoCoin1.png':'../../static/home/twoCoin.png'" mode="widthFix" ></image>
						</view>
						
						
						<view class="">+{{item.integral}}</view>
					</view>
				</view>
				<view class="Btnbox">
					<view class="signBtn" v-if="isSignIn == false" @click="signIn">立即签到</view>
					<view class="" v-if="isSignIn == true" @click="signIn" class="signBtn1">今日已签到</view>
				</view>
			</view>
			<!-- <view class="twoCoin">
				<image src="../../static/home/twoCoin.png" mode="widthFix"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signDays: '',
				signList:[
					{val:'第一天',index:0,integral:''},
					{val:'第二天',index:1,integral:''},
					{val:'第三天',index:2,integral:''},
					{val:'第四天',index:3,integral:''},
					{val:'第五天',index:4,integral:''},
					{val:'第六天',index:5,integral:''},
					{val:'第七天',index:6,integral:''},
				],
				isSignIn:'',
				num:''
			}
		},
		onLoad() {
			this.signInDays()
			this.$http('api/user_signin/signinIntegral').then(res => {
				for(let i=0;i<res.length;i++){
					for(let i=0;i<this.signList.length;i++){
						this.signList[i].integral=res[i]
					}
				}
			});
		},
		methods: {
			toSignLog(){
				uni.navigateTo({
					url:'./signInLog'
				})
			},
			//签到天数
			signInDays(){
				let _this=this
				this.$http('api/user_signin/signinDay').then(res => {
					this.signDays=res.days
					this.isSignIn=res.is_today_signin
					console.log(this.signDays)
					
					if(this.isSignIn == true){
						this.num=parseInt(this.signDays)
					}else if(this.isSignIn == false){
						this.num=parseInt(this.signDays)+1
					}
					console.log(this.num)
				});
				
				
			},
			// 用户签到
			signIn(){
				this.$http('api/user_signin/userSignin').then(res => {
					console.log()
					if(res.days){
						uni.showToast({
							title:'签到成功',
							icon:"none"
						})
					}
					this.signInDays()
				});
			},
			backHome(){
				uni.navigateBack({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
.container{
	width: 100%;
	.signInBox{
		width: 100%;
		height: 800rpx;
		background: url(@/static/home/signBg.png) no-repeat center 0rpx;
		// background-position: center 0px;
		background-size: 100% 100%;
		position: relative;
		.signTit,.signSubTit{
			position: absolute;
			width: 54%;
			top: 186rpx;
			left: 60rpx;
			image{
				width: 100%;
			}
		}
		.signSubTit{
			width: 38%;
			top: 300rpx;
			.signtext{
				position: relative;
				top: -56rpx;
				left: 12rpx;
				color: #FF652A;
			}
		}
		.signCont{
			width: 90%;
			height: 700rpx;
			background-color: #fff;
			border-radius: 20rpx;
			position: absolute;
			left: 5%;
			top: 440rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			// border: 1rpx solid rgba(0,0,0,0.1);
			box-shadow:  rgb(223, 223, 223) 0rpx 8rpx 20rpx 5rpx;
			.signContImg{
				display: flex;
				justify-content: space-around;
				position: relative;
				top: -20rpx;
				.contImg{
					width: 16rpx;
					height: 40rpx;
					border: 1rpx solid #707070;
					background-color: #fff;
					border-radius: 10rpx;
				}
			}
			.signInfo{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.signItem,.signItem1{
					
					border-radius: 20rpx;
					padding: 10rpx 0;
					box-sizing: border-box;
					text-align: center;
					margin-top: 40rpx;
					background-color: #F1F1F1;
					font-size: 26rpx;
					image{
						width: 50rpx;
						margin: 10rpx 0;
					}
				}
				.signItem1{
					background-color: #FFF2DF;
					color: #9E4308;
				}
			}
			.Btnbox{
				margin-top: 80rpx;
				font-size: 36rpx;
				.signBtn,.signBtn1{
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-radius: 50rpx;
					background: linear-gradient(90deg, #FC981A 0%, #F56008 100%);
					color: #fff;
				}
				.signBtn1{
					background: #C9C7C6;
				}
			}
		}
		.twoCoin{
			position: absolute;
			top: 1180rpx;
			left: 70%;
			image{
				width: 80rpx;
			}
		}
	}
}
</style>
